<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件信息查看器</title>
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- Element UI JS -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .file-info-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .file-tree {
            margin-top: 20px;
        }

        .file-icon {
            margin-right: 8px;
        }

        .file-size {
            color: #909399;
            font-size: 12px;
        }

        .file-time {
            color: #909399;
            font-size: 12px;
        }

        .file-permissions {
            font-family: monospace;
            background: #f5f7fa;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
        }

        .download-btn {
            margin-left: 10px;
        }

        .property-card {
            margin-bottom: 20px;
        }

        .property-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #ebeef5;
        }

        .property-item:last-child {
            border-bottom: none;
        }

        .property-label {
            font-weight: 500;
            color: #606266;
            min-width: 100px;
        }

        .property-value {
            color: #303133;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="file-info-container">
            <!-- 页面标题 -->
            <el-page-header @back="goBack" content="文件信息查看器">
            </el-page-header>

            <!-- 查询表单 -->
            <el-card class="property-card">
                <div slot="header">
                    <span>查询文件信息</span>
                </div>
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                    <el-form-item label="文件路径">
                        <el-input v-model="queryForm.folderPath" placeholder="请输入文件或文件夹路径" style="width: 300px;">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getFileInfo" :loading="loading">
                            <i class="el-icon-search"></i> 查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <!-- 服务器信息 -->
            <el-card v-if="fileData" class="property-card">
                <div slot="header">
                    <span>服务器信息</span>
                </div>
                <div class="property-item">
                    <span class="property-label">服务器IP:</span>
                    <span class="property-value">{{ fileData.serverIp }}</span>
                </div>
                <div class="property-item">
                    <span class="property-label">查询路径:</span>
                    <span class="property-value">{{ fileData.folderPath }}</span>
                </div>
                <div class="property-item">
                    <span class="property-label">状态:</span>
                    <el-tag :type="fileData.status === '1' ? 'success' : 'danger'">
                        {{ fileData.status === '1' ? '成功' : '失败' }}
                    </el-tag>
                </div>
            </el-card>

            <!-- 文件树形结构 -->
            <el-card v-if="fileData && fileData.data" class="file-tree">
                <div slot="header">
                    <span>文件结构</span>
                    <el-button v-if="!fileData.data.isDirectory" style="float: right; padding: 3px 0" type="text"
                        @click="downloadFile(fileData.data)">
                        <i class="el-icon-download"></i> 下载文件
                    </el-button>
                </div>

                <!-- 根节点信息 -->
                <div style="margin-bottom: 20px;">
                    <file-info-item :item="fileData.data" :server-ip="fileData.serverIp" @download="downloadFile">
                    </file-info-item>
                </div>

                <!-- 树形结构 -->
                <el-tree v-if="fileData.data.children && fileData.data.children.length > 0" :data="[fileData.data]"
                    :props="treeProps" :expand-on-click-node="false" default-expand-all>
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <file-info-item :item="data" :server-ip="fileData.serverIp" @download="downloadFile">
                        </file-info-item>
                    </span>
                </el-tree>
            </el-card>

            <!-- 空状态 -->
            <el-empty v-if="!fileData && !loading" description="请输入路径查询文件信息"></el-empty>
        </div>
    </div>

    <script>
        // 文件信息组件
        Vue.component('file-info-item', {
            props: ['item', 'serverIp'],
            template: `
                <div class="file-info-item">
                    <div style="display: flex; align-items: center; margin-bottom: 8px;">
                        <i :class="getFileIcon(item)" class="file-icon"></i>
                        <span style="font-weight: 500; margin-right: 10px;">{{ item.name }}</span>
                        <el-tag size="mini" :type="item.isDirectory ? 'primary' : 'success'">
                            {{ item.isDirectory ? '文件夹' : '文件' }}
                        </el-tag>
                        <el-button 
                            v-if="!item.isDirectory"
                            size="mini" 
                            type="text" 
                            class="download-btn"
                            @click="$emit('download', item)">
                            <i class="el-icon-download"></i> 下载
                        </el-button>
                    </div>
                    
                    <div style="display: flex; flex-wrap: wrap; gap: 15px; font-size: 12px; color: #909399;">
                        <span v-if="item.path">
                            <i class="el-icon-folder"></i> {{ item.path }}
                        </span>
                        <span v-if="item.size">
                            <i class="el-icon-document"></i> {{ formatFileSize(item.size) }}
                        </span>
                        <span v-if="item.modifyTime">
                            <i class="el-icon-time"></i> {{ item.modifyTime }}
                        </span>
                        <span v-if="item.permissions" class="file-permissions">
                            {{ item.permissions }}
                        </span>
                        <span v-if="item.owner">
                            <i class="el-icon-user"></i> {{ item.owner }}
                        </span>
                        <span v-if="item.group">
                            <i class="el-icon-s-custom"></i> {{ item.group }}
                        </span>
                    </div>
                </div>
            `,
            methods: {
                getFileIcon(item) {
                    if (item.isDirectory) {
                        return 'el-icon-folder';
                    }
                    const ext = item.name.split('.').pop().toLowerCase();
                    const iconMap = {
                        'txt': 'el-icon-document',
                        'pdf': 'el-icon-document',
                        'doc': 'el-icon-document',
                        'docx': 'el-icon-document',
                        'jpg': 'el-icon-picture',
                        'jpeg': 'el-icon-picture',
                        'png': 'el-icon-picture',
                        'gif': 'el-icon-picture',
                        'mp4': 'el-icon-video-camera',
                        'avi': 'el-icon-video-camera',
                        'mp3': 'el-icon-headset',
                        'wav': 'el-icon-headset',
                        'zip': 'el-icon-box',
                        'rar': 'el-icon-box',
                        'js': 'el-icon-document',
                        'html': 'el-icon-document',
                        'css': 'el-icon-document',
                        'java': 'el-icon-document',
                        'py': 'el-icon-document'
                    };
                    return iconMap[ext] || 'el-icon-document';
                },
                formatFileSize(bytes) {
                    if (!bytes || bytes === '0') return '0 B';
                    const k = 1024;
                    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
                }
            }
        });

        new Vue({
            el: '#app',
            data() {
                return {
                    queryForm: {
                        folderPath: '/ydTest'
                    },
                    fileData: null,
                    loading: false,
                    treeProps: {
                        children: 'children',
                        label: 'name'
                    }
                }
            },
            methods: {
                async getFileInfo() {
                    if (!this.queryForm.folderPath.trim()) {
                        this.$message.warning('请输入文件路径');
                        return;
                    }

                    this.loading = true;
                    try {
                        const response = await axios.get('/file/info', {
                            params: {
                                folderPath: this.queryForm.folderPath
                            }
                        });

                        if (response.data.code === 200) {
                            this.fileData = response.data.data;
                            this.$message.success('获取文件信息成功');
                        } else {
                            this.$message.error(response.data.msg || '获取文件信息失败');
                        }
                    } catch (error) {
                        console.error('获取文件信息失败:', error);
                        this.$message.error('获取文件信息失败: ' + error.message);
                    } finally {
                        this.loading = false;
                    }
                },

                downloadFile(fileItem) {
                    if (fileItem.isDirectory) {
                        this.$message.warning('无法下载文件夹');
                        return;
                    }

                    // 构建下载URL
                    const downloadUrl = `/file/download?serverIp=${this.fileData.serverIp}&filePath=${encodeURIComponent(fileItem.path)}`;

                    // 创建隐藏的下载链接
                    const link = document.createElement('a');
                    link.href = downloadUrl;
                    link.download = fileItem.name;
                    link.style.display = 'none';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);

                    this.$message.success('开始下载文件: ' + fileItem.name);
                },

                goBack() {
                    window.history.back();
                }
            },

            mounted() {
                // 页面加载时自动查询默认路径
                this.getFileInfo();
            }
        })
    </script>
</body>

</html>